<template>
  <div @click="handleClick" class="theme-toggle cursor-pointer">
    <el-switch
      v-model="themeStore.isDark"
      inline-prompt
      :active-icon="Moon"
      :inactive-icon="Sunny"
      style="--el-switch-on-color: #2c2c2c"
      class="pointer-events-none"
    />
  </div>
</template>

<script setup lang="ts">
import { Moon, Sunny } from '@element-plus/icons-vue'
import { useThemeStore } from '@/stores/theme'

const themeStore = useThemeStore()

const handleClick = (event: MouseEvent) => {
  themeStore.toggleTheme(event)
}
</script>

<style scoped>
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
</style>

